<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        {{a}}
        <custom-child></custom-child>
        <child></child>
    </div>
    <script>

        Vue.component('custom-child',{
            template:`
                <div>
                    <span v-for="item in arr">  {{item}}</span>
                    <child-c :title="abc" :arr='arr' @remove="remove" @changParent="toChange"></child-c>
                    <p @click="change">{{abc}}</p>
                </div>
            `,
            data(){
                return {
                    abc:'这是一个全局组件',
                    arr:[1,2,3,4,5,6],
                }
            },
            components:{
                'child-c':{
                    template:`
                        <div>
                            <a href="javascript:;" @click="change">{{mes}}</a>
                            <p v-for="item,index in arr">{{item}}<a href="javascript:;" @click='remove(index)'>关闭</a></p>
                        </div>
                    `,
                    props:['title','arr'],
                    data(){
                        return {
                            mes:this.title,
                        }
                    },
                    methods:{
                        change(){
                            this.$emit('changParent','我把它改了');
                        },
                        remove(index){
                            this.$emit('remove',index)
                        }
                    }
                }
            },
            methods:{
                change(){
                  this.abc = '改变了'  
                },
                toChange(data){
                    this.abc = data;
                },
                remove(id){
                    this.arr.splice(id,1);
                }
            }
        })

        let vm = new Vue({
            el:'#app',
            data:{
                a:'abc'
            },
            components:{
                'child':{
                    template:`
                        <div @click="change">{{message}}</div>
                    `,
                    data(){
                        return {
                            message:'123456',
                        }
                    },
                    methods:{
                        change(){
                            this.message = "xyz"
                        },
                    }
                }
            }
        })
    </script>
</body>
</html>